/**********************************************************
	GENERAL UI ELEMENTS
**********************************************************/

* {
	-webkit-user-select:none; /* Prevent copy paste for all elements except text fields */
	-webkit-tap-highlight-color:rgba(255, 255, 255, 0); /* set highlight color for user interaction */
	-ms-touch-action:none;
	-webkit-touch-callout: none; /* prevent the popup menu on any links*/
} 

input,textarea { -webkit-user-select:text; } /* allow users to select text that appears in input fields */

* {	
	margin:0;
	padding:0;
} /* Remove default padding and margins for all elements */

img { border:none; } /* Remove default borders for images */

body {
	overflow-x:hidden;
	-webkit-text-size-adjust:none;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	font-size:14px;
	background:rgba(19,29,38,1); /* primary background color */
	
	
	display: -webkit-box;
    /* We want to layout our first container vertically */
    -webkit-box-orient: vertical;
    /* we want our child elements to stretch to fit the container */
	-webkit-box-align:stretch;
	
} /* General styles that apply to elements not contained within other classes and styles */

p {
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:18px;
	
	padding:16px;
	-webkit-box-shadow:rgba(0,0,0,0.5) 0px 0px 24px inset; box-shadow:rgba(0,0,0,0.5) 0px 0px 24px inset; /* Applies an inner shadow to the text area */
} /* Paragraph class used for text areas. */


#jQui_modal{
    
    -webkit-backface-visibility: hidden;
	z-index:9999 !important;
	width:100%;
	height:100%;
	display:none;
	position:absolute; top:0px; 
	overflow:hidden;
	background:rgba(29,29,28,1) !important;
	-webkit-perspective: 1000;
}

#modalContainer {
width:100%;
}

.horzRule {
	position:relative;
	display:block;
	background-image:-webkit-gradient(linear, left top, right top, from(rgba(61,61,61,1)), to(rgba(61,61,61,1)), color-stop(.3,#999), color-stop(.7,#999));
	width:100%;	height:1px;
} /* Horizontal line. */

.jqmScrollbar { background:white !important; } /* Sets the color of the scrollbar */
.jqmScrollPanel { width:100%; min-height:100%; }

#jQUi {
	position:absolute;
	width:100%;
	top:0px;
	bottom:0px;
	overflow:hidden;

}

#jQUi > #splashscreen {
	position:absolute;
	top:0px;bottom:0px;
	width:100%;
	left:0px;
	min-height:100%;
	background:rgba(29,29,28,1) !important;
	color:white !important;
	font-size:30px;
	text-align:center;
	z-index:9999;
	display:block;
	margin-left: auto !important; margin-right: auto !important;
	padding-top:80px !important;
}



/**********************************************************
	header
**********************************************************/

#jQUi > #header {
	display:block;
	z-index:250;
	-webkit-box-sizing:border-box; box-sizing:border-box;
	height:48px;
    left:0px;right:0px;
	background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(16,25,33,1)), to(rgba(14,23,32,1)), color-stop(.5, rgba(27,36,46,1)), color-stop(.5, rgba(14,23,32,1)));
	-webkit-box-shadow:0px 0px 24px rgba(0,0,0,0.8); box-shadow:0px 0px 24px rgba(0,0,0,0.8);
} /* This is masthead bar that appears at the top of the UI */

#header > * {
position:relative;
z-index:2;
}

#header > h1 {
	position:absolute;
	overflow:hidden;
	width:100%;
    z-index:1;
    text-align:center;
	height:48px; 
	font-family: Helvetica, Arial, sans-serif;
	font-weight:normal;
	font-size:24px;
	line-height:48px;
	text-shadow:rgba(0,0,0,0.8) 0px -1px 0px 1px;
	text-align:center;
	text-overflow:ellipsis;
	white-space:nowrap;
	color:#fff;
} /* This is text that appears in the header at the top of the screen */




/**********************************************************
	BUTTON STYLES
**********************************************************/
#backButton {
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	max-width:50px;
	text-overflow:ellipsis;
} /* Sets up positioning of the back button which appears in the header */

#backButton > div {
	max-width:50px;
	overflow:hidden;
	text-overflow:ellipsis;
} /* sets up sizing and handling of excess text for the type in the back button */

.button {
    z-index:1;
	color:#333;
	cursor:pointer;
	display:inline-block;
	font-weight:bold;
	font-size:14px;
	line-height:36px;
	position:relative;
	text-decoration:none;
	text-align:center;
	text-shadow:#fff 0 1px 0;
	height:36px; min-width:40px;
	padding:0px 8px;
	margin-top:6px; margin-left:6px; 
	text-overflow:ellipsis; 
	-webkit-border-radius:6px; border-radius:6px;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#999), color-stop(.5,#fff), color-stop(.5,#ccc)); background-image:linear-gradient(left top, left bottom, from(#fff), to(#999), color-stop(.5,#fff), color-stop(.5,#ccc));
	background:#ccc;
} /* Styling for CSS-generated buttons, including the back button. These buttons can bue used anywhere in the UI. */

.button.pressed {
	color:#fff;
	text-shadow:#2e4987 0 1px 0;
	background-color:#5884d6;
	border-color:#7488b8;
	background-image:-webkit-gradient(linear,left top,left bottom, color-stop(0.01, #eee), color-stop(0.05, #709de7), color-stop(0.70, #5884d6), color-stop(1, #4470ca));
} /* behavior of button for touch interaction */

.modalbutton {
	position:absolute;
	top:0px;
	right:5px;
	height:32px;
	width:58px;
	line-height:32px;
	z-index:9999;
}

.closebutton  {
position:absolute;
top:6px; right:6px;
display:block;
height:24px !important; width:24px !important;
border-radius:12px;
border:1px solid #666;
background:#fff;
color:#333;
font:bold 21px/18px 'Arial Black', Arial Black, Gadget, Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
}
.closebutton:before { content:'x'; }
.closebutton.selected,.closebutton.modalButton.selected {
color:#fff;
background:#333; 
}



/**********************************************************
	CONTENT AREA
**********************************************************/
#content{
	z-index:180;
	display:block;
	position:absolute;
	top:48px;
	bottom:62px;
	left:0px;right:0px;
	overflow:hidden;
} /* Accounts for positioning of the content area, which is everything below the header and above the navbar. */

.panel {
	z-index:180;
	width:100%;
	height:100%;
	display:none;
    position:absolute; top:0px; left:0px;
	background:rgba(19,29,38,1);
    margin-top:10px;
    margin-bottom:10px;
	overflow-y:auto;
	overflow-x:hidden;
	-webkit-overflow-scrolling:touch;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
} /* This class is applied to the divs that contain the various "views" or pages of the app. */ 

.panel > * {
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}


/**********************************************************
	TOOL BAR
**********************************************************/
/* Tool bar appears locked to the bottom of the screen. It is the primary navigation. can contain text or graphical navigation */
#navbar {
	position:absolute;
	bottom:0px;
	z-index:1000;
	text-align:center;
	left:0px;right:0px;
	height:62px; padding:0px 1px;
	 background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(16,25,33,1)), to(rgba(14,23,32,1)), color-stop(.5, rgba(27,36,46,1)), color-stop(.5, rgba(14,23,32,1)));
	-webkit-box-shadow:0px 0px 24px rgba(0,0,0,0.8); box-shadow:0px 0px 24px rgba(0,0,0,0.8);
}

#navbar a {
	height:60px;
	overflow:hidden;
	display:inline-block;
	font-family:Helvetica, Arial, sans-serif;
	font-weight:bold;
	font-size:12px;
	text-decoration:none;
	color:#a7a7a7;
	text-align:center;
	text-shadow:rgba(10,12,20,.9) 0px -1px 1px;
	margin: 0px auto;
	width:62px;
	line-height:100px;
	position:relative;
}

#navbar a:active, #navbar a:focus, #navbar a:active:focus,  #navbar .selected{
	display:inline-block;
	font-family:Helvetica, Arial, sans-serif;
	font-weight:bold;
	color:#fff !important;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#000), to(#000), color-stop(.5,#000), color-stop(.5,rgba(15,22,29,1)));
}


/* CUSTOM NAVBAR */

#navbar a:not(:last-of-type) {
    border-right:1px solid rgba(80,80,80,.5);
}

#navbar .icon:before {
line-height:62px;
text-align:center;
position:absolute;
top:-10px;
left:10px;
font-size:48px;
}

.jq-badge {
	display:-webkit-box;
	-webkit-box-direction:reverse; 
	position:absolute;
	font-size:10px;
	border:2px solid white;
	color:white;
	background:red;
	line-height:12px;
	border-radius:10px;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width:20px;
	max-width:90%;
	height:20px;
	margin:2px;
	padding: 1px 4px 1px 4px;
	top:2px;
	right:2px;
	text-align:center;
	z-index:100;
}

.jq-badge.br {
	bottom:2px;
	right:2px;
	top:auto;
	left:auto;
}

.jq-badge.bl {
	-webkit-box-direction:normal !important;
	bottom:2px;
	left:2px;
	top:auto;
	right:auto;
}

.jq-badge.tl {
	-webkit-box-direction:normal !important;
	top:2px;
	left:2px;
	right:auto;
	bottom:auto;
}


/* Custom footers - always hidden */
#jQUi footer, #jQUi header, #jQUi nav {	display:none; }



#jQUi > #menu {
	z-index:1;
	width:200px;
	bottom:0px;
	height:100%;
	display:none;
	position:absolute; top:0px; left:0px;
	background:rgba(29,29,28,1);
}
#menu_scroller {
	padding-bottom:10px;
	-webkit-backface-visibility: hidden;
	overflow-y:auto;
	overflow-x:hidden;
	-webkit-overflow-scrolling:touch;
}




#menu > * {
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
.jqMenuHeader
{
	position:relative;
	text-align:center;
	margin-top:2px;
	font-size:24px;
	margin-left:auto;margin-right:auto;
	font-weight:bold;
	margin-bottom:3px; 
	z-index:1;
}

.jqMenuClose{
	position:relative;
	z-index:2;
	float:right;
}

#menu  .title {
	font-size:16px;
	border-bottom:2px solid #333;
	margin-bottom:3px; 
	font-weight:bold;
}

#menu  ul {
	margin:0px; 
	padding:0px;
	margin-bottom:5px;
}
 
#menu  ul > li {
	padding-left:10px;
	display:block;
	width:100%; height:28px;
	
	list-style:none;
	background:inherit;
} /* A plain, non-interactive list item--best suited to a heading. */

#menu  ul > li > a {
	display:block;
	width:100%; height:28px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight:normal;
	font-size:14px;
	border-top:1px solid black;
	border-left:1px solid black;
	border-right:1px solid black;
	line-height:28px;
	text-decoration:none;
	border-bottom:none;
	color:#fff;
	background:#333;
} 

#menu ul > li > a:after {
	content:"";
}

#menu ul > li:last-child > a{
	border-bottom:1px solid black;
}



/* End side menu css */

.splashscreen {
	background:rgba(29,29,28,1) !important;
	padding-left:40px;
	padding-top:30px !important;
	min-height:100%;
}

/* A touchable, interactive list item. */
/**********************************************************
	UL > LI 
**********************************************************/
/* The unordered list/list item classes are the basis of the secondary navigation used in JQ.Mobi: the stacked, listed menu system. */

ul {
	margin:0px; 
	padding:0px;
}
 
ul > li {
	
	display:block;
	width:100%; height:48px;
	list-style:none;
	background:#39424b;
} /* A plain, non-interactive list item--best suited to a heading. */

ul > li > a {
	display:block;
	width:100%; height:48px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight:bold;
	font-size:18px;
	line-height:48px;
	text-decoration:none;
	border-bottom:1px solid black;
	color:#fff;
	padding-left:8px;
	padding-right:-80px;
} /* A touchable, interactive list item. */

ul > li > a:after {
	content:">";
	position:absolute;
	right:15px;
}

 ul > li > a[selected], ul > li > a:active {
	color:#fff !important;

} /* A selected and active states for interactive list items. */

ul > li.group {
	position:relative;
	top:-1px;
	margin-bottom:-2px;
	border-top:1px solid #7d7d7d;
	border-bottom:1px solid #999999;
	padding:1px 10px;
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.09, rgb(125,125,125)), color-stop(0.49, rgb(153,153,153)), color-stop(0.81, rgb(153,153,153)));
	font-size:17px;
	font-weight:bold;
	text-shadow:rgba(0, 0, 0, 0.4) 0px 1px 0px;
	color:#fff;
}

ul > li.group:first-child {
	top:0;
}

h2 {
	display:block;
	width:100%; height:34px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight:bold;
	font-size:18px;
	line-height:34px; 
	padding: 0px 8px 0px 8px;
	color:#fff;
	text-shadow:rgba(0,0,0,.9) 0px -1px 1px;
	background:#39424b;
} /* Header class used for non-navigable header bars (h1 is reserved for the header) */


.collapsed:after {float:right;content:'';border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 6px solid #fff;display:block;position:absolute;top:16px;right:13px;}
.collapsed:before {float:right;content:'';color:transparent;background:transparent;width:14px;height:14px; display:block;border:2px solid white;border-radius:3px;position:absolute;top:9px;right:9px;}
.expanded:after {float:right;content:'';border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 6px solid #fff;display:block;position:absolute;top:14px;right:13px;}
.expanded:before {float:right;content:'';color:transparent;background:transparent;width:14px;height:14px; display:block;border:2px solid white;border-radius:3px;position:absolute;top:9px;right:9px;}


/**********************************************************
	UI
**********************************************************/	
.ui-icon {
	background: 						#666;
	background: 						rgba(0,0,0,.4);
	background-repeat: no-repeat;
	border-radius: 						9px;
}

.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -100px; margin-top: -35px; padding: 10px 30px; background: #666;background:rgba(0,0,0,.4);border-radius:9px;}
.ui-loader h1 { font-size: 15px; text-align: center; }
.ui-loader .ui-icon { position: static; display: block; opacity: .9; margin: 0 auto; width: 35px; height: 35px; background-color: transparent; }

.spin  {
	-webkit-transform: rotate(360deg);
	-webkit-animation-name: spin;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count:  infinite;
}
@-webkit-keyframes spin {
	from {-webkit-transform: rotate(0deg);}
  	to {-webkit-transform: rotate(360deg);}
}

.ui-icon-loading {
	background-image: url();
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background-size: 35px 35px;
}
	
.ui-corner-all {
	border-radius:.6em;
}
#jQui_mask {position:absolute;top:45%;}


/**********************************************************
	FORM ELEMENTS
**********************************************************/

* { -webkit-box-sizing:border-box; box-sizing:border-box; }

fieldset h4 {
	text-align:left;
	font-family: Helvetica, Arial, sans-serif;
	color:#a8b4bb;
	font-weight:bold;
	font-size:18px;
	line-height:21px;
	margin-bottom:-8px; margin-top:8px;
	text-shadow:1px 1px 3px rgba(0, 0, 0, 0.9);
} /* Style for subhead for a group of labels/inputs within a fieldset. */


fieldset {
	margin:12px 8px;
	padding:12px 18px 12px 18px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #595d61;
	outline:0;
	width:95%;

} /* Styles the border line, background image and spacing for fieldsets. */

fieldset p {
	display:block;
	position:relative;
	overflow:hidden;
	padding:0px;
	padding-bottom:8px;
	padding-top:8px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:10px;
	background:transparent;
	height:37px !important;
	-webkit-box-shadow:none;
} /* The paragraph within a fieldset is used as a wrapper to help manage the replacement of native input elements. */

legend {
	margin:0;
	font-family:Helvetica, Arial, sans-serif;
	font-size:18px;
	font-weight:bold;
	overflow:hidden;
	color:#ccc;
	text-transform:uppercase;
	text-shadow:1px 1px 3px rgba(0, 0, 0, 0.9);
} /* This is the name that appears at the top left of the fieldset. */

textarea.jq-ui-forms { 
	display:block;
	margin-top:4px; margin-bottom:18px;
	padding:8px;
	border:solid 1px #999;
	outline:0;
	color:#fff;
	background:#595D61;
	-webkit-border-radius:6px; border-radius:6px;
	-webkit-box-shadow:inset 2px 2px 6px rgba(0,0,0,.5); box-shadow:inset 2px 2px 6px rgba(0,0,0,.5);
	width:85%;
	min-height:150px;
	line-height:120%;
} /* These properties determine the look of textarea inputs. */


input.jq-ui-forms { 
	
	display:block;
	width:65%;
	margin-top:4px; margin-bottom:12px;
	padding:8px;
	border:solid 1px #999;
	outline:0;
	color:#fff;
	background:#595D61;
	-webkit-border-radius:6px; border-radius:6px;
	-webkit-box-shadow:inset 2px 2px 6px rgba(0,0,0,.5); box-shadow:inset 2px 2px 6px rgba(0,0,0,.5);
} /* These properties combine to create the look of the input fields. */


#jQUi label {
	position: relative;
overflow: visible;
white-space: nowrap;
display: block;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 6px;
color: white;
font-weight: normal;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
display:block;
float:none;
}


input.jq-ui-forms:hover, textarea.jq-ui-forms:hover, input.jq-ui-forms:focus, textarea.jq-ui-forms:focus { border-color:#ccc; } /* Changes the border color of the input field while active. */


input.jq-ui-forms[type=checkbox] ,input.jq-ui-forms[type=radio]  {
	position: absolute;
    left: 0;
	-webkit-appearance: none;
	opacity:0;
	margin-bottom:30px;
    width:0px;
    display:none;
} /* Blocks rendering of the native radio controls. */

input.jq-ui-forms[type=checkbox] + label,input.jq-ui-forms[type=radio] + label { 
	
	float:left;
	font-size:15px;
	font-weight:bold;
	line-height:26px; /* changing this value will change the vertical relationship to the radios & checkboxes. */
	margin-left:10px;
	padding-left:30px;
	background:url() 0 0px no-repeat;
	background-repeat:none;
	height:25px;
	
} /* Styling for the labels. */


/* Following block of paragraph classes sets up the usage of the custom radio and checkbox graphics. */


input.jq-ui-forms[type=radio] + label { background-position:0 -225px; }
input.jq-ui-forms[type=checkbox] + label { background-position:0 -25px; }

/* Styles for "checked." */
input.jq-ui-forms[type=radio]:checked + label { background-position:0 -300px; }
input.jq-ui-forms[type=radio]:hover:checked + label,
input.jq-ui-forms[type=radio]:focus:checked + label,
input.jq-ui-forms[type=radio]:checked + label:hover,
input.jq-ui-forms[type=radio]:focus:checked + label { background-position:0 -300px; }

input.jq-ui-forms[type=checkbox]:checked + label { background-position:0 -100px; }
input.jq-ui-forms[type=checkbox]:hover:checked + label,
input.jq-ui-forms[type=checkbox]:focus:checked + label,
input.jq-ui-forms[type=checkbox]:checked + label:hover,
input.jq-ui-forms[type=checkbox]:focus:checked + label { background-position:0 -100px; }


/* Styles for "hover/focus." */
input.jq-ui-forms[type=checkbox]:hover + label,
input.jq-ui-forms[type=checkbox]:focus + label,
input.jq-ui-forms[type=checkbox] + label:hover { background-position:0 -0x; }

input.jq-ui-forms[type=radio]:hover + label,
input.jq-ui-forms[type=radio]:focus + label,
input.jq-ui-forms[type=radio] + label:hover { background-position:0 -200px; }

/* Styles for "active." */
input.jq-ui-forms[type=checkbox]:active + label,
input.jq-ui-forms[type=checkbox] + label:hover:active { background-position:0 -0px; }

input.jq-ui-forms[type=radio]:active + label,
input.jq-ui-forms[type=radio] + label:hover:active { background-position:0 -200px; }


input.jq-ui-forms[type=checkbox]:active:checked + label,
input.jq-ui-forms[type=checkbox]:checked + label:hover:active { background-position:0 -100px; }

input.jq-ui-forms[type=radio]:active:checked + label,
input.jq-ui-forms[type=radio]:checked + label:hover:active { background-position:0 -300px; }

/* Styles for "disabled." */
input.jq-ui-forms[type=checkbox]:disabled + label,
input.jq-ui-forms[type=checkbox]:hover:disabled + label,
input.jq-ui-forms[type=checkbox]:focus:disabled + label,
input.jq-ui-forms[type=checkbox]:disabled + label:hover,
input.jq-ui-forms[type=checkbox]:disabled + label:hover:active { background-position:0 -175px; opacity:.5 !important; }

input.jq-ui-forms[type=radio]:disabled + label,
input.jq-ui-forms[type=radio]:hover:disabled + label,
input.jq-ui-forms[type=radio]:focus:disabled + label,
input.jq-ui-forms[type=radio]:disabled + label:hover,
input.jq-ui-forms[type=radio]:disabled + label:hover:active { background-position:0 -250px; opacity:.5 !important; }

input.jq-ui-forms[type=checkbox]:disabled:checked + label,
input.jq-ui-forms[type=checkbox]:hover:disabled:checked + label,
input.jq-ui-forms[type=checkbox]:focus:disabled:checked + label,
input.jq-ui-forms[type=checkbox]:disabled:checked + label:hover,
input.jq-ui-forms[type=checkbox]:disabled:checked + label:hover:active { background-position:0 -200px; opacity:.5 !important; }

input.jq-ui-forms[type=radio]:disabled:checked + label,
input.jq-ui-forms[type=radio]:hover:disabled:checked + label,
input.jq-ui-forms[type=radio]:focus:disabled:checked + label,
input.jq-ui-forms[type=radio]:disabled:checked + label:hover,
input.jq-ui-forms[type=radio]:disabled:checked + label:hover:active { background-position:0 -375px; opacity:.5 !important; }

input.jq-ui-forms[type=radio]:active:checked + label,
input.jq-ui-forms[type=checkbox]:active:checked + label,
input.jq-ui-forms[type=radio]:active + label,
input.jq-ui-forms[type=checkbox]:active + label,
input.jq-ui-slider[type=checkbox]:checked + label ,
input.jq-ui-slider[type=radio]:checked + label 
{ background-position:-28px 0px; }


/********    slider controls */
input.jq-ui-slider {
	position:absolute;
	left:0;
	opacity:0;
	 -webkit-appearance: none;
	 display:none;
} /* Blocks rendering of the native radio controls. */

	
input.jq-ui-slider + label { 

	float:left;
	font-size:15px;
	font-weight:normal;
	line-height:24px; /* changing this value will change the vertical relationship to the radios & checkboxes. */
	margin-left:10px;
	padding-left:57px;
	color:#fff; 
	background-image: url();
	height:24px;
	width:0px;
	display:inline-block;
	transition:all 0.3s  ease-in-out;
	background-repeat: no-repeat;
   -webkit-transition: all 0.3s  ease-in-out;
   transition: all 0.3s  ease-in-out;

} 

input.jq-ui-slider[type=radio]:disabled:checked + label,
input.jq-ui-slider[type=radio]:focus:disabled:checked + label,
input.jq-ui-slider[type=checkbox]:disabled:checked + label,
input.jq-ui-slider[type=checkbox]:focus:disabled:checked + label
{ background-position:-29px 0px; opacity:.7 !important;}

/* Styles for "disabled." */
input.jq-ui-slider[type=checkbox]:disabled + label,
input.jq-ui-slider[type=checkbox]:focus:disabled + label,
input.jq-ui-slider[type=radio]:disabled + label,
input.jq-ui-slider[type=radio]:focus:disabled + label
{ background-position:0 0; opacity:.7 !important; }
	

    
    

select[disabled]~div {
	opacity:.7;
}

	
.hasMenu{
/*removed - should neve be all (performance), 300ms param should go into jq.ui.js; also default should not have accelaration, avoid iPhone blur*/
/* -webkit-transition: all 300ms; */
 position:absolute !important;
 left:0px !important;
}
/*menu on/off mechanism, note .hasMenu.off and #menu.on default to no transform*/
.hasMenu.to-on {
  -webkit-transition: -webkit-transform 150ms;
  transition: transform 150ms;
}
.hasMenu.on, .hasMenu.to-on {
  -webkit-transform:translate3d(200px,0px,0px);
  transform:translate(200px,0px);
}
.hasMenu.to-off {
  -webkit-transition: -webkit-transform 150ms;
  -webkit-transform:translate3d(0px,0px,0px);
  transition: transform 150ms;
  transform:translate(0px,0px);
}
#menu.on {
    -webkit-transform:none;
	-webkit-transition:none;
	transform:none;
	transition:none;
}
#menu.to-on {
    -webkit-transition: -webkit-transform 150ms;
    -webkit-transform:translate3d(0px,0px,0px);
    transition: transform 150ms;
    transform:translate(0px,0px);
}
#menu.to-off {
    -webkit-transition: -webkit-transform 150ms;
    transition: transform 150ms;
}
#menu, #menu.off, #menu.to-off {
    -webkit-transform:translate3d(-200px,0px,0px);
    transform:translate(-200px,0px);
}

.menuButton {

		position:relative;
		width:48px;	height:48px;
		padding:9px 4px;
		border-right:1px solid #666;
		box-shadow:1px 0 0 #000;
		background-color:transparent;
		display:inline-block;
	}
	.menuButton:active { background:rgba(255,255,255,0.4); }
	.menuButton:before {
		content:'';
		position:absolute;
		width:80%; height:6px;
		border-radius:20px;
		background:#fff;
		box-shadow:0 12px 0 #fff;
		-webkit-box-shadow:0 12px 0 #fff;
	}
	.menuButton:after {
		content:'';
		position:absolute;
		top:33px;
		width:80%; height:6px;
		border-radius:20px;
		background:#fff;
	}

@media handheld, only screen and (min-width: 768px){
	.hasMenu, .hasMenu.on  {
		position:absolute !important;
		left:256px !important;
		-webkit-transition: all 0ms !important;
        -webkit-transform:translate3d(0,0,0);
        transform:translate(0,0,0);
	}
	#badgephone{
		display:none !important;
	}
	#badgetablet{
		display:inline-block !important;
	}
	.jqMenuClose {
		display:none !important;
	}
	
	nav~#menu {
		z-index:200 !important;
		width:256px !important;
		bottom:0px !important;
		height:100% !important;
		display:block !important;
		position:absolute !important; top:0px !important; 
		left:0px !important;
		background:rgba(29,29,28,1) !important;
		-webkit-transform:translate3d(0px,0px,0px) !important;
		-webkit-transition:none !important;
		transform:translate(0px,0px) !important;
		transition:none !important;
	}
	.hasMenu.to-on {
		-webkit-transition: none !important;
		transition: none !important;
	}
	.hasMenu.on, .hasMenu.to-on {
		-webkit-transform:translate3d(0px,0px,0px) !important;
		-webkit-transition:none !important;
		transform:translate(0px,0px) !important;
		transition:none !important;
	}
	.hasMenu.to-off {
		-webkit-transform:translate3d(0px,0px,0px) !important;
		-webkit-transition:none !important;
		transform:translate(0px,0px) !important;
		transition:none !important;
	}
    
}
#jq_actionsheet {
    position:absolute;
    left:0px;
    right:0px;
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    margin:auto;
    background:black;
    float:left;
    z-index:9999;
    border-top:#fff 1px solid;
    background:rgba(71,71,71,.95);
    background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.4)), to(rgba(255,255,255,0)), color-stop(.08,rgba(255,255,255,.1)), color-stop(.08,rgba(255,255,255,0)));
    background-image:-webkit-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(255,255,255,.1) 8%, rgba(255,255,255,0) 8%);
    box-shadow:0px -1px 2px rgba(0,0,0,.4);
    transition:all 300ms;
    -webkit-transition:all 300ms;
}
#jq_actionsheet a {
    text-decoration:none;
    -webkit-transition:all 0.4s ease; 
     text-shadow:0px -1px rgba(0,0,0,.8);
    padding:0px .25em;
    border:1px solid rgba(0,0,0,.8);
    text-overflow:ellipsis; 
    -webkit-border-radius:.75em; border-radius:.75em;
    background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.4)), to(rgba(255,255,255,0)), color-stop(.5,rgba(255,255,255,.1)), color-stop(.5,rgba(255,255,255,0)));
    background-image:-webkit-linear-gradient(top, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 50%);
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.7); box-shadow:0px 1px 1px rgba(255,255,255,0.7);
    display:block;
    color:white;
    text-align:center;
    line-height:36px;
    font-size:20px;
    font-weight:bold;
    margin-bottom:10px;
    background-color:rgba(130,130,130,1);
}

#jq_actionsheet a.selected {
    background-color:rgba(150,150,150,1);
}

#jq_actionsheet a.cancel {
 background-color:rgba(43,43,43,1);
}

#jq_actionsheet a.cancel.selected {
    background-color:rgba(73,73,73,1);
}
#jq_actionsheet a.red {
     color:white;
     background-color:rgba(204,0,0,1);
}

#jq_actionsheet a.red.selected {
     background-color:rgba(255,0,0,1); 
}

BODY>DIV#mask{
    display:block;
    width:100%; 
    height:100%; 
    background:#000; 
    z-index: 999999; 
    position:absolute; 
    top:0; 
    left:0;
}

.jqPopup {
    display: block;
    width: 280px;
    float:left;
    border: solid 1px #72767b;
    -webkit-box-shadow: 0px 4px 6px #555, 0 0 20px rgba(255,255,255,0.5);
    -webkit-border-radius: 10px;
    border-radius:10px;
    padding: 10px;
    opacity: 1;
    -webkit-transform: scale(1);
    -webkit-transition: all 0.20s  ease-in-out;
    transform:scale(1);
    transition: all 0.20s  ease-in-out;
    position: absolute;
    z-index: 1000000;
    margin-left: auto!important;
    margin-right: auto!important;
    background: rgba(70,70,70,1);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(70,70,70,0.8)),    to(rgba(0,20,20,0.8)));
}
.jqPopup * {
color:white;
}

.jqPopup.hidden {
    opacity: 0;
    -webkit-transform: scale(0);
    transform:scale(0);
    top: 50%;
    left: 50%;
    margin: 0px auto;
}

.jqPopup header{
    font-weight:bold;
    font-size:20px;    
    margin:0;
    padding:0;
    display:block !important;
}

.jqPopup div{
    font-size:12px;
}

.jqPopup footer{
    width:100%;    
    text-align:center;
    display:block !important;
}

.jqPopup footer a#cancel{
    float:left;
}

.jqPopup footer a#action{
    float:right;
    margin-right:4px;
}

.jqPopup footer a.center{
    float:none!important;
    width:80%;
    margin:8px;
}




/** This can be your default scrollbar class.  You must use !important to override the default inline styles */
.scrollBar { 
   position:absolute !important;
   width:5px !important;
   height:20px !important;
   border-radius:2px !important;
   border:1px soldid black !important;
   background:black !important;
   opacity:0 !important;
}/*
 * Since the styles are built in, you have to override values with !important
 */

/* Row of selected item */
.jqmobiSelectRowFound {
}

/* Button (radio) for the found item in the list */
.jqmobiSelectRowButtonFound{
}


/* Row for items in the list */
.jqmobiSelectRow{

}

/* button for the items in the list */
.jqmobiSelectRowButton{

}

/* class for the item text displayed */
.jqmobiSelectRowText{
}

/* Header for select box */
#jqmobiSelectBoxHeader{
}

/* div that holds the options listed*/
#jqmobiSelectBoxFix {

}